<template>
  <el-col :span="24" class="col_1">
    <el-row class="header_company">
      <el-col :span="24">
        <span class="demonstration" style="line-height:2rem">
          单位指标完成进度
          <SvgIcon icon-class="process-company" />
        </span>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="选择周期">
            <el-select v-model="searchForm.period">
              <el-option
                v-for="item in periodDict"
                :key="item.id"
                :label="item.alias"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择类型">
            <ConferTypeSelector v-model="searchForm.conferType" :multi="true" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row v-loading="indicatorListLoading" class="row-indicator">
      <el-radio-group v-model="indicatorSelected">
        <el-radio-button
          v-for="item in indicatorList"
          :key="item.id"
          :label="item.id"
          class="radio-indicator"
        >{{ item.title }}</el-radio-button>
      </el-radio-group>
    </el-row>
    <el-row class="row_company">
      <CompanyBarChart
        :x-axis-data.sync="xAxisData"
        :y-axis-data.sync="yAxisData"
        :legend-array.sync="legendArray"
      />
    </el-row>
  </el-col>
</template>
<script>
import { arrayToBinaryFlag, binaryFlagToArray } from '@/utils'
import { isOutDate } from '@/views/HomePage/common'
import { companyChild } from '@/api/company'
import {
  getIndicatorList,
  getIndicatorRate
} from '@/api/zzxt/party-conference/confer-indicator'
export default {
  name: 'CompanyProgress',
  components: {
    ConferTypeSelector: () =>
      import('@/components/Party/ConferType/ConferTypeSelector'),
    CompanyBarChart: () => import('./CompanyBarChart')
  },
  data: () => ({
    indicatorListLoading: false,
    searchForm: { period: 4, conferType: [1] },
    companyCodeArray: null,
    indicatorList: null,
    xAxisData: null,
    yAxisData: null,
    legendArray: null,
    indicatorSelected: null
  }),
  computed: {
    periodDict() {
      return this.$store.state.party.RankType
    },
    rootCompanyCode() {
      const code = this.$store.state.user.globalCompany
      return code
    },
    conferTypesDict() {
      return this.$store.state.party.conferTypesDict
    }
  },
  watch: {
    rootCompanyCode: {
      handler(val) {
        if (val) this.RefreshCompanyArray()
      },
      immediate: true
    },
    searchForm: {
      handler(val) {
        this.RefreshIndicatorList()
      },
      immediate: true,
      deep: true
    },
    indicatorSelected: {
      handler(val) {
        this.AWaitBExexute('companyCodeArray', 'QueryCompanyIndicatorRate')
      }
    }
  },
  methods: {
    binaryFlagToArray,
    arrayToBinaryFlag,
    AWaitBExexute(arrName, methodsName) {
      if (!this[arrName]) {
        return setTimeout(() => {
          this.AWaitBExexute(arrName, methodsName)
        }, 200)
      }
      this[methodsName]()
    },
    RefreshCompanyArray() {
      companyChild(this.rootCompanyCode).then(data => {
        this.companyCodeArray = data.list.map(i => {
          return i.code
        })
        this.xAxisData = data.list.map(i => {
          return i.name
        })
      })
    },
    RefreshIndicatorList() {
      this.indicatorListLoading = true
      const type = arrayToBinaryFlag(this.searchForm.conferType)
      const query_list = {
        period: this.searchForm.period,
        conferenceType: type,
        companyCode: this.rootCompanyCode
      }
      getIndicatorList(query_list).then(data => {
        this.indicatorList = data.list.filter(i => isOutDate(i.end))
        this.indicatorListLoading = false
      })
    },
    QueryCompanyIndicatorRate() {
      const indicatorQuery = {
        company: this.rootCompanyCode,
        indicator: this.indicatorSelected
      }
      getIndicatorRate(indicatorQuery).then(re => {
        const indicatorRateDict = {}
        re.model.statistics.list.map(i => {
          indicatorRateDict[i.company] = i
        })
        this.yAxisData = this.companyCodeArray.map(item => {
          if (!indicatorRateDict[item]) return 0
          return indicatorRateDict[item].countRate
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../home/style.scss';
.row_company {
  height: 38rem;
}
.row-indicator {
  height: 3rem;
  margin-bottom: 0.6rem;
}
.radio-indicator {
  margin-left: 2rem;
}
</style>
